<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心动游戏页面</title>
		<link rel="stylesheet" type="text/css" href="css/top.css"/>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" type="text/css" href="css/通用.css"/>
		<link rel="stylesheet" type="text/css" href="css/floatLogo.css"/>
		
		<style type="text/css">
			#top_box{
				background-color: #F5F5F5;
				height: 600px;
			}
			#t1{
				font-style: italic;
				text-align: center;
				font-size: 26px;
				font-weight: bold;
				color: #000000;
			}
			#t2{
				text-align: center;
				font-size: 14px;
				color: #000000;
			}
			#top_table .topimg{
				width: 100%;
				height: 100%;
			}
			#top_tbox{
				height: 200px;
				width: 400px;
				display: inline-block;
				/* margin-top: -100px; */
			}
			#center table td img{
				width: 524px;
				height: 395px;
			}
			.text{
				margin-top: 7px;
				font-size: 18px;
				color: #000000;
			}
			.enter{
				cursor:pointer;
				color: #FFFFFF;
				border-style: none;
				border-radius: 18px;
				background-color: #ff6600;
				width: 100px;
				height: 40px;
			}
		</style>
		<title></title>
	</head>
	<body>
		<img src="img/imgmove.png" width="30px"  style="position: absolute;" id="imgmove">
		<div id="right_float" >
			<a href="index.html"><img src="img/logo.png" ></a>
		</div>
		<div id="top_box">
			<div id="top">
				<div id="top_center">
				<a href="index.html"><img src="./img/logo.png" class="logo" ></a>
				<div class="top_list_box">
					<ul class="top_list">
						<li>
							<a href="index.html">首页</a>
						</li>
						<li>
							<a href="论坛.html">论坛</a>
						</li>
						<li>
							<a href="游戏.html">游戏</a>
						</li>
						<li>
							<a href="加入心动.html">加入心动</a>
						</li>
						<li>
							<a href="家长指引.html">家长指引</a>
						</li>
						<li>
							<a href="#">其他</a>
							<ul>
								<li class="lis"><a href="留言.html">留言</a></li>
								<li class="lis"><a href="pacific.html">太平洋网络</a></li>
							</ul>
						</li>
					</ul>
				</div>
				<div class="search_box">
						<input type="text" name=""  value="" class="search" placeholder="搜索" /><a href=""><img src="img/搜索按钮.png" ></a>
						
				</div>
				<a href="登录.html">登录</a> |
				<a href="注册.html">注册</a>
			</div>
			</div>
			<div id="top_table" align="center">
				<table border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td><img src="img/img14.png" class="topimg"></td>
						<td>
							<div id="top_tbox">
								<div id="t1" style="">
									心动游戏
								</div>
								<span id="t2">
									心动坚持以匠人之心，用自豪的手艺骄傲地挣玩家的打赏钱。
								</span>
							</div>
						</td>
						<td>
							<img src="img/img15.png" style="float: right;" class="topimg">
						</td>
					</tr>
				</table>
			</div>
		</div>
		
		<div id="center" align="center">
			<table border="0" cellspacing="50px" cellpadding="0">
				<tr>
					<td>
						<a href=""><img src="img/img16.jpg" ></a>
						<div class="text">
							仙境传说：守护永恒的爱
						</div>
					</td>
					<td>
						<a href=""><img src="img/img17.png" ></a>
						<div class="text">
							香肠派对
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<a href=""><img src="img/img18.png" ></a>
						<div class="text">
							不休的乌拉拉
						</div>
					</td>
					<td>
						<a href=""><img src="img/img19.jpg" ></a>
						<div class="text">
							另一个伊甸 超越时空的猫
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<a href=""><img src="img/img20.png" ></a>
						<div class="text">
							去月球
						</div>
					</td>
					<td>
						<a href=""><img src="img/img21.png" ></a>
						<div class="text">
							人类跌落梦境
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<a href=""><img src="img/img22.png" ></a>
						<div class="text">
							喵斯快跑
						</div>
					</td>
					<td>
						<a href=""><img src="img/img23.jpg" ></a>
						<div class="text">
							天天打波利
						</div>
					</td>
				</tr>
			</table>
		</div>
		<div  align="center" style="height: 120px;">
			<a href="#"><button type="button" value="加载更多" class="enter" >加载更多</button></a>
		</div>
		
		<div class="base">
				<!-- 底部通用于所有网页 -->
				<div id="base_center">
					<table border="0px" cellspacing="20px" cellpadding="5px">
						
						<tr>
							<td>
								<a href="#">免责声明</a> |
								<a href="#">隐私政策</a> |
								<a href="#">用户协议</a> |
								<a href="#">游戏大厅</a> |
								<a href="#">论坛</a>
							</td>
							<td align="right"><img src="img/logo2.png" ></td>
						</tr>
						<tr>
							<td>学号：2403130240</td>
							<td></td>
						</tr>
						<tr>
							<td>姓名：陈奕喧</td>
							<td></td>
						</tr>
						<tr>
							<td>在线客服微信公众号：123456</td>
							<td align="right">河北互联网举报中心</td>
						</tr>
						<tr>
							<td>投诉举报邮箱：tousu@xd.com</td>
							<td align="right">网上有害信息举报专区</td>
						</tr>
					</table>
				</div>
			</div>
		
		
		<script type="text/javascript">
			var list=document.querySelector(".top_list");
			var lis=list.children;
			for(var i=0;i<lis.length;i++){
				if(lis[i].children.length=="2"){
					lis[i].addEventListener("mousemove",function(){
						this.children[1].style.display="block";
						
					});
					lis[i].addEventListener("mouseout",function(){
						this.children[1].style.display="none";
					});
				}
			}
			//鼠标事件
			var pic=document.getElementById("imgmove");//获取图片对象
			document.addEventListener('mousemove',function(e){//添加鼠标移动事件
				var x=e.pageX||e.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);//获取鼠标在文档中的x坐标
				var y=e.pageY||e.clientY+(document.body.scrollTop||document.documentElement.scrollTop);//获取鼠标在文档中的y坐标
				pic.style.left=x+2+"px";//第四象限
				pic.style.top=y+2+'px';
			})
			
			window.addEventListener('scroll',function(){//页面滚动事件
			            let top= document.getElementById("top");
			           if(window.scrollY>0)
			            {
			                top.className="bian";
			            }else{
			                top.className="top";
			            }
			        })
		</script>
	</body>
</html>
